<template>
  <!--  右侧完整的配置元素-->
  <div class="go-chart-configurations-setting" v-if="targetData">
    <!-- 名称 -->
    <name-setting :chartConfig="targetData.chartConfig"></name-setting>
    <!-- 尺寸 -->
    <size-setting :isGroup="targetData.isGroup" :chartAttr="targetData.attr"></size-setting>
    <!-- 位置 -->
    <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
    <!-- 滤镜 -->
    <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>
    <!-- 自定义配置项 -->
    <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"
               :chartConfig="targetData.chartConfig"></component>
  </div>
</template>

<script setup lang="ts">
import {NameSetting, PositionSetting, SizeSetting, StylesSetting} from '@/components/Pages/ChartItemSetting'
import {useTargetData} from '../hooks/useTargetData.hook'
import {onMounted, watch} from "vue";
import {componentInstall} from "@/utils";
import {fetchConfigComponent} from "@/packages/index";
// @ts-ignore
import Utils from "@/vue2-flow/src/utils/Common.js";

const {targetData, chartEditStore} = useTargetData()
onMounted(() => {
  const _CC = targetData.value.chartConfig
  componentInstall(_CC.conKey, fetchConfigComponent(_CC))
})
watch(() => targetData.value?.chartConfig?.conKey,
    (newValue) => {
      if (targetData) {
        const _CC = targetData.value?.chartConfig
        if (_CC) {
          componentInstall(_CC.conKey, fetchConfigComponent(_CC))
        }
      }
    },
    {
      immediate: true,
      deep: true
    })
</script>

<style lang="scss" scoped>
@include go('chart-configurations-setting') {
}
</style>
